<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>考神驾到手机站驾考视频页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/public.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/windowsheight.js"></script>

    <script src="${pageContext.request.contextPath}/manager_page/layui/layui.js"></script>

    <style type="text/css">
        .a_special{ width:92.94871794871795%; display: block; height:100%;height:2em; margin:3.5% auto; line-height:2em;  text-align:center;}

        .img_special{ display:block; width:99.99%;border:1px solid #e0e0e0; border-radius:15px;}
        .p_special{ height:2.416666666666667em; line-height:2.416666666666667;white-space:nowrap; text-overflow: ellipsis;overflow:hidden;font-size:1em;}
        .img_special_div{
            margin-top: -25px;text-align: right;
        }
        .img_special_div div{
            margin-top: -18px;margin-right: 10px;
        }
        .img_special_div div label{
            color: #e9e9e9;
        }
        .left{
            float: left;
        }
    </style>
</head>

<body>
<!-----------头部开始--------------->
<%@ include file="page_head.jsp"%>
<!-----------头部结束--------------->


<!-----------内容开始--------------->
 <div class="content">
   <div class="biaoshitop">&nbsp;</div>
   <div class="titlecom">
      <p class="video_p">驾考视频</p>
      <div class="tabtila fr">
        <a href="javascript:changeVideo('');">全部</a> | <a href="javascript:changeVideo('科二');">科目二</a> | <a href="javascript:changeVideo('科三');">科目三</a>
        <a href="#" class="titlemore"><img src="images/title_69.jpg"/></a>
      </div>          
      <div class="moresort">
        <div class="moresost_con">
            <span><a href="javascript:changeVideo('科二');">科目二</a></span>
            <span><a href="javascript:changeVideo('科二倒车入库');">倒车入库</a></span>
            <span><a href="javascript:changeVideo('科二侧方停车');">侧方停车</a></span>
            <span><a href="javascript:changeVideo('科二坡道定点');">坡道定点</a></span>
            <span><a href="javascript:changeVideo('科二直角拐弯');">直角拐弯</a></span>
            <span><a href="javascript:changeVideo('科二曲线行驶');">曲线行驶</a></span>
            <span class="a_special"></span>
            <span class="a_special"></span>
            <span><a href="javascript:changeVideo('科三');">科目三</a></span>
            <span><a href="javascript:changeVideo('科三上车准备');">上车准备</a></span>
            <span><a href="javascript:changeVideo('科三直线行驶');">直线行驶</a></span>
            <span><a href="javascript:changeVideo('科三百米加减档');">百米加减档</a></span>
            <span><a href="javascript:changeVideo('科三灯光模拟考试');">灯光模拟考试</a></span>
            <div class="clear"></div>
        </div>
      </div>
   </div>
   <ul class="video_index" id="video_index_ul">

<%--       <li class="fr left">--%>
<%--           <a href="javascript:;">--%>
<%--               <div>--%>
<%--                   <img src="../my_image/bg_brid.jpg" class="img_special">--%>
<%--                   <div class="img_special_div">--%>
<%--                       <img src="images/video_play.png" style="display:block; border:0px solid #e0e0e0; border-radius:30px;height: 20px;width: 20px;margin-left: 10px;">--%>
<%--                       <div><label>1:00</label></div>--%>
<%--                   </div>--%>
<%--               </div>--%>
<%--               <p style="margin-top: 10px">详解2015北美车展上的概...</p>--%>
<%--           </a>--%>
<%--       </li>--%>



     <div class="clear"></div>
   </ul>
   <div class="pageturn">
     <div class="prepage"><a href="javascript:lastPage();">< 上一页</a></div>
     <p><span><b id="current_page">1</b>/<label id="total_page">0</label></span></p>
    <div class="prepage"> <a href="javascript:nextPage();">下一页 ></a></div>
   </div>
 </div>
 <!-----------内容结束--------------->
<%-- <div class="footer">--%>
<%--   <p>©考神驾到版权所有</p>--%>
<%--   <span>www.kaoshenjiadao.com</span>--%>
<%-- </div>--%>
 
</body>
<!--头部高度赋给列表的topjs-->

<script>
    var layer;
    layui.use('layer',function(){
        layer=layui.layer;
    });

    var data_array=[];
    var total_page;
    var current_page;

    window.onload=function(){
        $("#page_head_title").text("驾考视频");
        changeVideo("");
    }

    function changeVideo(video_class_sub){
        $.ajax({
            url:"${pageContext.request.contextPath}/front_video/change_video.do",
            data:{
                "video_class_sub":video_class_sub
            },
            success:function(data,status){
                if(status=="success"){
                    var path="${pageContext.request.contextPath}/img_artificial/video_img/";
                    $("#video_index_ul").empty();
                    data_array=data;
                    total_page=Math.ceil(data.length/6);
                    current_page=1;
                    $("#total_page").text(total_page);
                    $("#current_page").text(current_page);
                    changeUl(data,1);
                }
            }
        })
    }

    function changeUl(data,page){
        var index_start=(page-1)*6;
        var index_end=index_start+6;

        if(page==total_page){
            index_end=data.length;
        }

        var path="${pageContext.request.contextPath}/img_artificial/video_img/";
        $("#video_index_ul").empty();
        for(var i=index_start;i<index_end;i++){
            var li=$("<li></li>").attr("class","fr left");
            var a=$("<a></a>").attr("href","javascript:to_jiakao_videodetail("+data[i].video_id+");");
            var div1=$("<div></div>");
            var img1=$("<img>").attr({
                "src":path+data[i].video_img,
                "class":"img_special"
            })
            var div2=$("<div></div>").attr("class","img_special_div");
            var img2=$("<img>").attr({
                "src":"images/video_play.png",
                "style":"display:block; border:0px solid #e0e0e0; border-radius:30px;height: 20px;width: 20px;margin-left: 10px;"
            })
            var div3=$("<div></div>");
            var label=$("<label></label>").text(data[i].video_length);
            var p=$("<p></p>").attr("style","margin-top: 10px;").text(data[i].video_title);
            div3.append(label);
            div2.append(img2,div3);
            div1.append(img1,div2);
            a.append(div1,p);
            li.append(a);
            $("#video_index_ul").append(li);
        }
        var div_end=$("<div></div>").attr("class","clear");
        $("#video_index_ul").append(div_end);
    }

    function lastPage(){
        if(current_page<=1){
            layer.msg("这已经是第一页了");
        }else{
            current_page--;
            changeUl(data_array,current_page);
            $("#current_page").text(current_page);
        }
    }
    function nextPage(){
        if(current_page>=total_page){
            layer.msg("这已经是最后一页了");
        }else{
            current_page++;
            changeUl(data_array,current_page);
            $("#current_page").text(current_page);
        }
    }


    function to_jiakao_videodetail(video_id){
        window.location.href="${pageContext.request.contextPath}/page/jiakao_videodetail.jsp?video_id_hidden="+video_id;
    }

</script>





<script>
   var heighttop=$(".top").height();
   $(".topmenu").css("top",heighttop);
    $(".menumore").toggle(function(){
	     $(".topmenu").show(); 
	   },function(){
	     $(".topmenu").hide(); 
	 	   })
   $(".buttontop").click(function(){
	     $(".topmenu").hide();  
	   })
	   
 $(function(){
	 $(".tasecartop span a").click(function(){
		  var $banktip=$(this).attr("tip");
		  $($banktip).show().siblings().hide();
		  $(".tasecartop span a").removeClass("payaclik");
		  $(this).addClass("payaclik");
		 })
	
	})
 </script>
 
<!--头部高度赋给列表的topjs-->
<!--banner将图片的高度赋给父级扪js-->
<script>
   var heighta=$("#incltialiu li:eq(0) img").height();
   $(".main,.width,#incltialiu").height(heighta) ;
 </script>
 <!--banner将图片的高度赋给父级扪js-->
<!--首页标题点击出现更多分类js-->
 <script>
	$(".titlemore").toggle(function(){
		$(this).parent(".tabtila").siblings(".moresort").show()
		$(this).children("img").attr("src","images/title_692.jpg")
		},function(){
		$(this).parent(".tabtila").siblings(".moresort").hide()
		$(this).children("img").attr("src","images/title_69.jpg")
		})
  </script>
 <!--首页标题点击出现更多分类js-->
</html>
